<template>
  <view class="recommended-section">
    <view class="section-header">
      <view class="header-title">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="header-icon">
          <path
            d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
          </path>
        </svg>
        <text>AI推荐学习</text>
      </view>
      <text class="more-link">更多</text>
    </view>

    <scroll-view scroll-x="true" class="scroll-container" show-scrollbar="false">
      <view class="cards-container">
        <!-- Math Card -->
        <view class="recommendation-card blue-card">
          <view class="card-image">
            <view class="card-image-overlay"></view>
            <view class="card-image-gradient"></view>
            <view class="card-image-content">
              <view class="card-badge">数学专题</view>
              <text class="card-title">函数与导数专题训练</text>
            </view>
          </view>
          <view class="card-details">
            <view class="card-info">
              <text class="card-source">根据你的错题生成</text>
              <view class="difficulty-badge medium">难度: 中等</view>
            </view>
            <view class="card-footer">
              <text class="time-estimate">预计用时: 30分钟</text>
              <view class="start-button blue-button">开始学习</view>
            </view>
          </view>
        </view>

        <!-- English Card -->
        <view class="recommendation-card purple-card">
          <view class="card-image">
            <view class="card-image-overlay"></view>
            <view class="card-image-gradient"></view>
            <view class="card-image-content">
              <view class="card-badge">英语专题</view>
              <text class="card-title">高频词汇记忆训练</text>
            </view>
          </view>
          <view class="card-details">
            <view class="card-info">
              <text class="card-source">基于你的学习习惯</text>
              <view class="difficulty-badge easy">难度: 简单</view>
            </view>
            <view class="card-footer">
              <text class="time-estimate">预计用时: 15分钟</text>
              <view class="start-button purple-button">开始学习</view>
            </view>
          </view>
        </view>

        <!-- Physics Card -->
        <view class="recommendation-card green-card">
          <view class="card-image">
            <view class="card-image-overlay"></view>
            <view class="card-image-gradient"></view>
            <view class="card-image-content">
              <view class="card-badge">物理专题</view>
              <text class="card-title">力学综合题解析</text>
            </view>
          </view>
          <view class="card-details">
            <view class="card-info">
              <text class="card-source">针对薄弱环节</text>
              <view class="difficulty-badge hard">难度: 困难</view>
            </view>
            <view class="card-footer">
              <text class="time-estimate">预计用时: 45分钟</text>
              <view class="start-button green-button">开始学习</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
// No additional script needed for this component
</script>

<style>
.recommended-section {
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.header-title {
  display: flex;
  align-items: center;
}

.header-icon {
  color: #2563eb;
  margin-right: 12rpx;
}

.header-title text {
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.more-link {
  font-size: 24rpx;
  font-weight: 500;
  color: #2563eb;
}

.scroll-container {
  width: 100%;
  white-space: nowrap;
}

.cards-container {
  display: inline-flex;
  padding-bottom: 16rpx;
}

.recommendation-card {
  width: 560rpx;
  border-radius: 24rpx;
  overflow: hidden;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.blue-card {
  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
}

.purple-card {
  background: linear-gradient(to bottom right, #8b5cf6, #7c3aed);
}

.green-card {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.card-image {
  position: relative;
  height: 180rpx;
}

.card-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.card-image-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.card-image-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20rpx;
}

.card-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  padding: 4rpx 16rpx;
  font-size: 22rpx;
  color: white;
  margin-bottom: 8rpx;
  backdrop-filter: blur(4px);
}

.card-title {
  font-size: 32rpx;
  font-weight: 700;
  color: white;
}

.card-details {
  background-color: white;
  padding: 20rpx;
}

.card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-source {
  font-size: 22rpx;
  color: #6b7280;
}

.difficulty-badge {
  font-size: 22rpx;
  font-weight: 500;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
}

.easy {
  background-color: #ecfdf5;
  color: #059669;
}

.medium {
  background-color: #fffbeb;
  color: #d97706;
}

.hard {
  background-color: #fee2e2;
  color: #dc2626;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-estimate {
  font-size: 22rpx;
  color: #6b7280;
}

.start-button {
  font-size: 22rpx;
  font-weight: 500;
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
}

.blue-button {
  background-color: #dbeafe;
  color: #2563eb;
}

.purple-button {
  background-color: #ede9fe;
  color: #7c3aed;
}

.green-button {
  background-color: #d1fae5;
  color: #059669;
}
</style>